import { Form, Switch, Select, Radio, Checkbox, TimePicker, Button, Icon, Divider, Input, message, InputNumber, } from "antd";
import React from "react";
import { getSetSkillGroupList, getUsersByTenantId } from "@/services/onlineSkillSet";
import { getChannelInfoByApplicationId, postSaveChannelInfo } from "@/services/geographic";
import moment from "moment";
let workTimeId = 0;
let sessionAssignId = 0;
let enquiryAssignId = 0;
const { Option } = Select;
class Transfer extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			groupList: [],
			userList: [],
			infoData: null,
			channelInfo: null,
		}
	}

	componentDidMount() {
		this.getSkillGroupList();
		this.getUserList();
		setTimeout(() => {
			this.getChannelInfo()
		}, 200)
	}

	getSkillGroupList = async () => {
		const res = await getSetSkillGroupList();
		this.setState({ groupList: res });
	}

	getUserList = async () => {
		const res = await getUsersByTenantId();
		// console.log(res);
		this.setState({ userList: res });
	}

	getChannelInfo = async () => {
		const { groupList, userList } = this.state;
		const { robotId, form, applicationId } = this.props;
		const res = await getChannelInfoByApplicationId({ applicationId });
		console.log(res);
		let channelInfo = {};
		var infoData = {
			workTime: 'full',
			keys: [],
			enquiryAssign: true,
			enquiryKeys: [],
			enquiryList: [],
			sessionAssign: true,
			sessionKeys: [],
			sessionList: [],
		};
		if (res && res.data) {
			let resData = res.data;
			if (resData.channel.sessionConfiguration == 1) {
				infoData['sessionAssign'] = true;
				resData.sessionAllotList.forEach((item, index) => {
					channelInfo[`assignGroupsA_${index}`] = item.allotType;
					channelInfo[`assignGroupA_${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
					channelInfo[`isSpilloverA_${index}`] = item.overflowFlag;
					channelInfo[`queueNumA_${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
					infoData[`assignGroupsA_${index}`] = item.allotType;
					infoData[`assignGroupA_${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
					infoData[`isSpilloverA_${index}`] = item.overflowFlag;
					infoData[`queueNumA_${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
					infoData['sessionKeys'].push({
						id: index,
						assignGroupsA: item.allotType,
						assignGroupA: item.allotUserId,
						isSpilloverA: item.overflowFlag,
					});
				})
			};
			if (resData.channel.sessionConfiguration == 2) {
				infoData['sessionAssign'] = false;
				channelInfo['consultMessage'] = resData.channel.consultMessage;
				resData.sessionConsultTypeList.forEach((i, j) => {
					channelInfo[`sessionNameA_${j}`] = i.name;
					channelInfo[`sessionRemarkA_${j}`] = i.remark;
					infoData[`sessionNameA_${j}`] = i.name;
					infoData[`sessionRemarkA_${j}`] = i.remark;
					infoData.sessionList.push({
						sessionName: i.name,
						sessionRemark: i.remark,
						sessionKeys: i.consultTypeAllotList.map((item, index) => {
							return {
								id: index,
								assignGroupsA: item.allotType,
								assignGroupA: item.allotUserId,
								isSpilloverA: item.overflowFlag,
							}
						}),
					});
					i.consultTypeAllotList.forEach((item, index) => {
						channelInfo[`assignGroupsA_${j}&${index}`] = item.allotType;
						channelInfo[`assignGroupA_${j}&${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
						channelInfo[`isSpilloverA_${j}&${index}`] = item.overflowFlag;
						channelInfo[`queueNumA_${j}&${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
						infoData[`assignGroupsA_${j}&${index}`] = item.allotType;
						infoData[`assignGroupA_${j}&${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
						infoData[`isSpilloverA_${j}&${index}`] = item.overflowFlag;
						infoData[`queueNumA_${j}&${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
						// infoData['sessionKeys'].push({
						// 	id: index,
						// 	assignGroupsA: item.allotType,
						// 	assignGroupA: item.allotUserId,
						// 	isSpilloverA: item.overflowFlag,
						// })
					})
				})
			};
			if (resData.channel.messageConfiguration == 1) {
				infoData['enquiryAssign'] = true;
				resData.leaveAllotList.forEach((item, index) => {
					channelInfo[`assignGroupsB_${index}`] = item.allotType;
					channelInfo[`assignGroupB_${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
					// channelInfo[`isSpilloverB_${index}`] = item.overflowFlag;
					// channelInfo[`queueNumB_${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
					infoData[`assignGroupsB_${index}`] = item.allotType;
					infoData[`assignGroup_${index}B`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
					// infoData[`isSpilloverB_${index}`] = item.overflowFlag;
					// infoData[`queueNumB_${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;

					// infoData[`assignGroupsB`] = item.allotType;
					// infoData[`assignGroupB`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
					infoData['enquiryKeys'].push({
						id: index,
						assignGroupsB: item.allotType,
						assignGroupB: item.allotUserId,
						// isSpilloverB: item.overflowFlag,
					})
				})
			};
			if (resData.channel.messageConfiguration == 2) {
				infoData['enquiryAssign'] = false;
				resData.leaveConsultTypeList.forEach((i, j) => {
					channelInfo[`enquiryNameB_${j}`] = i.name;
					channelInfo[`enquiryRemarkB_${j}`] = i.remark;
					infoData[`enquiryNameB_${j}`] = i.name;
					infoData[`enquiryRemarkB_${j}`] = i.remark;
					infoData.enquiryList.push({
						enquiryName: i.name,
						enquiryRemark: i.remark,
						enquiryKeys: i.consultTypeAllotList.map((item, index) => {
							return {
								id: index,
								assignGroupsB: item.allotType,
								assignGroupB: item.allotUserId,
								// isSpilloverB: item.overflowFlag,
							}
						}),
					})
					i.consultTypeAllotList.forEach((item, index) => {
						channelInfo[`assignGroupsB_${j}&${index}`] = item.allotType;
						channelInfo[`assignGroupB_${j}&${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
						// channelInfo[`isSpilloverB_${j}&${index}`] = item.overflowFlag;
						// channelInfo[`queueNumB_${j}&${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;
						infoData[`assignGroupsB_${j}&${index}`] = item.allotType;
						infoData[`assignGroupB_${j}&${index}`] = item.allotType == 2 ? item.allotUserId : item.allotType == 1 ? item.allotGroupId : undefined;
						// infoData[`isSpilloverB_${j}&${index}`] = item.overflowFlag;
						// infoData[`queueNumB_${j}&${index}`] = item.overflowFlag == 0 ? item.queueNum : undefined;

						// infoData['enquiryKeys'].push({
						// 	id: index,
						// 	assignGroupsB: item.allotType,
						// 	assignGroupB: item.allotUserId,
						// })
					})
				})
			};
			if (resData.channel.userWorkTime == 1) {
				infoData['workTime'] = 'full';
			};
			if (resData.channel.userWorkTime == 2) {
				infoData['workTime'] = 'nofull';
				resData.serviceTimeList.forEach((item, index) => {
					channelInfo[`week_${index}`] = item.day;
					channelInfo[`time1_${index}`] = moment(item.serviceStartTime, 'HH:mm:ss');
					channelInfo[`time2_${index}`] = moment(item.serviceEndTime, 'HH:mm:ss');
					// infoData['keys'] = [];
					infoData['keys'].push({
						id: index,
						week: item.day,
						time1: moment(item.serviceStartTime, 'HH:mm:ss'),
						time2: moment(item.serviceEndTime, 'HH:mm:ss'),
					})
				});
			};
			if (resData.channel.overTimeFlag == 1) {
				infoData['overTimeFlag'] = true;
			} else {
				infoData['overTimeFlag'] = false;
			};
			this.setState({ infoData, channelInfo });
			let userInfo = form.getFieldsValue();
			form.setFieldsValue({
				...userInfo,

				workTime: resData.channel.userWorkTime == 1 ? 'full' : resData.channel.userWorkTime == 2 ? 'nofull' : 'full',
				onlyWork: resData.channel.onlyUserWork == 1 ? true : resData.channel.onlyUserWork == 2 ? false : undefined,
				unOnlyWork: resData.channel.onlyRobotWork == 1 ? true : resData.channel.onlyRobotWork == 2 ? false : undefined,
				overTimeFlag: resData.channel.overTimeFlag == 1 ? true : resData.channel.overTimeFlag == 2 ? false : false,

				overTime: resData.channel.overTimeFlag == 1 ? resData.channel.overTime : undefined,
				consultMessage: resData.channel.consultMessage,

				sessionAssign: resData.channel.sessionConfiguration == 1 ? true : resData.channel.sessionConfiguration == 2 ? false : true,
				enquiryAssign: resData.channel.messageConfiguration == 1 ? true : resData.channel.messageConfiguration == 2 ? false : true,
				// ticketAssign: [],
				sessionAllotList: resData.channel.sessionAllotList, // 固定会话分配
				leaveAllotList: resData.channel.leaveAllotList, // 固定留言分配

				...channelInfo,
				manualLabor: resData.channel.manualLabor
			});
		} else {
			this.setState({
				infoData: {
					workTime: 'full',
					keys: [],
					enquiryAssign: true,
					enquiryKeys: [
						{
							id: enquiryAssignId,
							assignGroupsB: undefined,
							assignGroupB: undefined,
							// isSpilloverB: undefined,
						},
					],
					enquiryList: [{
						enquiryName: '',
						enquiryRemark: '',
						enquiryKeys: [{
							id: enquiryAssignId,
							assignGroupsB: undefined,
							assignGroupB: undefined,
							// isSpilloverB: undefined,
						}],
					}],
					sessionAssign: true,
					sessionKeys: [
						{
							id: workTimeId,
							week: undefined,
							time1: undefined,
							time2: undefined,
						},
					],
					sessionList: [{
						sessionName: '',
						sessionRemark: '',
						sessionKeys: [{
							id: sessionAssignId,
							assignGroupsA: undefined,
							assignGroupA: undefined,
							isSpilloverA: undefined,
						}],
					}],
				}
			});
		}
	};

	setInfoData = (value, type, type1) => {
		const { infoData, groupList, userList } = this.state;
		const { form } = this.props;
		let userInfo = form.getFieldsValue();
		let val = type.indexOf('assignGroups') !== -1 ? (
			value == 1 ? (
				groupList.length > 0 ? groupList[0].groupId : undefined
			) : (
				value == 2 ? (userList.length > 0 ? userList[0].userId : undefined) : undefined
			)
		) : undefined;
		let obj = {
			...userInfo,
			[type]: value,
			[type1]: val,
			keys: type === "workTime" && value ? infoData && infoData.keys && infoData.keys.length > 0 ? infoData.keys : [
				{
					id: workTimeId,
					week: undefined,
					time1: undefined,
					time2: undefined,
				},
			] : infoData?.keys,
			// 固定分配;
			sessionKeys: type === "sessionAssign" && value ? infoData && infoData.sessionKeys && infoData.sessionKeys.length > 0 ? infoData.sessionKeys : [
				{
					id: sessionAssignId,
					assignGroupsA: undefined,
					assignGroupA: undefined,
					isSpilloverA: undefined,
				},
			] : infoData?.sessionKeys,
			enquiryKeys: type === "enquiryAssign" && value ? infoData && infoData.enquiryKeys && infoData.enquiryKeys.length > 0 ? infoData.enquiryKeys : [
				{
					id: enquiryAssignId,
					assignGroupsB: undefined,
					assignGroupB: undefined,
					// isSpilloverB: undefined,
				},
			] : infoData?.enquiryKeys,
			// 自定义分配;
			sessionList: type === "sessionAssign" && !value ? infoData && infoData.sessionList && infoData.sessionList.length > 0 ? infoData.sessionList : [{
				sessionName: '',
				sessionRemark: '',
				sessionKeys: [{
					id: sessionAssignId,
					assignGroupsA: undefined,
					assignGroupA: undefined,
					isSpilloverA: undefined,
				}],
			}] : infoData?.sessionList,
			enquiryList: type === "enquiryAssign" && !value ? infoData && infoData.enquiryList && infoData.enquiryList.length > 0 ? infoData.enquiryList : [{
				enquiryName: '',
				enquiryRemark: '',
				enquiryKeys: [{
					id: enquiryAssignId,
					assignGroupsB: undefined,
					assignGroupB: undefined,
					// isSpilloverB: undefined,
				}],
			}] : infoData?.enquiryList,
		};
		this.setState({ infoData: { ...infoData, ...obj } }, () => {
			if (typeof type1 !== 'undefined') {
				form.setFields({ [type1]: '' });
			}
		});
	};

	getInfoData = (value, type, key) => {
		let { infoData } = this.state;
		const { form } = this.props;
		let userInfo = form.getFieldsValue();
		infoData.keys.forEach((item, index) => {
			if (key === index) {
				switch (type) {
					case "week":
						item["week"] = value;
						break;
					case "time1":
						item["time1"] = value;
						break;
					case "time2":
						item["time2"] = value;
						break;
				}
			}
		});
		this.setState({ infoData });
	};

	addWorkTime = () => {
		const { infoData } = this.state;
		let keys = infoData.keys;
		let key = keys.length + 1;
		keys.push({ id: key, week: undefined, time1: undefined, time2: undefined });
		this.setState({ infoData: { ...infoData, keys } });
	};

	removeWorkTime = (k) => {
		const { infoData } = this.state;
		let keys = [];
		infoData.keys.forEach((item, index) => {
			if (k !== item.id) {
				keys.push(item);
			}
		});
		this.setState({ infoData: { ...infoData, keys } });
	};

	addSession = () => {
		const { infoData } = this.state;
		let sessionList = infoData.sessionList;
		let key = ++sessionAssignId;
		sessionList.push({
			sessionName: '',
			sessionRemark: '',
			sessionKeys: [{
				id: key,
				assignGroupsA: undefined,
				assignGroupA: undefined,
				isSpilloverA: undefined,
			}],
		});
		this.setState({ infoData: { ...infoData, sessionList } });
	};

	removeSession = (k) => {
		let { infoData } = this.state;
		infoData.sessionList = infoData.sessionList.filter((_, i) => k !== i);
		this.setState({ infoData });
	};

	addSessionItem = (sessionIndex) => {
		const { infoData } = this.state;
		let sessionList = infoData.sessionList;
		let key = ++sessionAssignId;
		sessionList[sessionIndex].sessionKeys.push({
			id: key,
			assignGroupsA: undefined,
			assignGroupA: undefined,
			isSpilloverA: undefined,
		});
		this.setState({ infoData: { ...infoData, sessionList } });
	};

	removeSessionItem = (sessionIndex, k) => {
		let { infoData } = this.state;
		infoData.sessionList[sessionIndex].sessionKeys = infoData.sessionList[sessionIndex].sessionKeys.filter((_, i) => k >= i);
		this.setState({ infoData });
	};

	addSessionAssign = () => {
		const { infoData } = this.state;
		let sessionKeys = infoData.sessionKeys;
		let key = ++sessionAssignId;
		sessionKeys.push({
			id: key,
			assignGroupsA: undefined,
			assignGroupA: undefined,
			isSpilloverA: undefined,
		});
		this.setState({ infoData: { ...infoData, sessionKeys } });
	};

	removeSessionAssign = (k) => {
		let { infoData } = this.state;
		infoData.sessionKeys = infoData.sessionKeys.filter((_, i) => k >= i);
		this.setState({ infoData });
	};

	addEnquiry = () => {
		const { infoData } = this.state;
		let enquiryList = infoData.enquiryList;
		let key = ++enquiryAssignId;
		enquiryList.push({
			enquiryName: '',
			enquiryRemark: '',
			enquiryKeys: [{
				id: key,
				assignGroupsB: undefined,
				assignGroupB: undefined,
				// isSpilloverB: undefined,
			}],
		});
		this.setState({ infoData: { ...infoData, enquiryList } });
	};

	removeEnquiry = (k) => {
		let { infoData } = this.state;
		infoData.enquiryList = infoData.enquiryList.filter((_, i) => k !== i);
		this.setState({ infoData });
	};

	addEnquiryItem = (enquiryIndex) => {
		const { infoData } = this.state;
		// console.log(infoData, enquiryIndex);
		let enquiryList = infoData.enquiryList;
		let key = ++enquiryAssignId;
		enquiryList[enquiryIndex].enquiryKeys.push({
			id: key,
			assignGroupsB: undefined,
			assignGroupB: undefined,
			// isSpilloverB: undefined,
		});
		this.setState({ infoData: { ...infoData, enquiryList } }, () => {
			// console.log(this.state.infoData);
		});
	};

	removeEnquiryItem = (enquiryIndex, k) => {
		let { infoData } = this.state;
		// console.log(infoData, enquiryIndex, k);
		infoData.enquiryList[enquiryIndex].enquiryKeys = infoData.enquiryList[enquiryIndex].enquiryKeys.filter((_, i) => k >= i);
		this.setState({ infoData });
	};

	addEnquiryAssign = () => {
		const { infoData } = this.state;
		let enquiryKeys = infoData.enquiryKeys;
		let key = ++enquiryAssignId;
		enquiryKeys.push({
			id: key,
			assignGroupsB: undefined,
			assignGroupB: undefined,
			// isSpilloverB: undefined,
		});
		this.setState({ infoData: { ...infoData, enquiryKeys } });
	};

	removeEnquiryAssign = (k) => {
		let { infoData } = this.state;
		infoData.enquiryKeys = infoData.enquiryKeys.filter((_, i) => k >= i);
		this.setState({ infoData });
	};

	doSaveTransfer = () => {
		const { infoData } = this.state;
		const { form, robotId, applicationId } = this.props;
		const that = this;
		form.validateFields(async (errors, values) => {
			if (errors) {
				return false;
			};
			// 客服--初始化设置
			let kfData = {
				applicationId,
				userWorkTime: values.workTime == 'full' ? 1 : values.workTime == 'nofull' ? 2 : undefined,
				onlyUserWork: values.onlyWork ? 1 : 2,
				onlyRobotWork: values.unOnlyWork ? 1 : 2,
				overTimeFlag: values.overTimeFlag ? 1 : 2,
				overTime: values.overTimeFlag ? values.overTime : undefined,
				// consultMessage: '',
				sessionConfiguration: values.sessionAssign ? 1 : 2,
				messageConfiguration: values.enquiryAssign ? 1 : 2,
				sessionAllotList: values.sessionAssign ? infoData && infoData.sessionKeys.length > 0 ? infoData.sessionKeys.map((item, index) => {
					return {
						allotType: values[`assignGroupsA_${item.id}`],
						allotUserId: values[`assignGroupsA_${item.id}`] === 2 ? Number(values[`assignGroupA_${item.id}`]) : undefined,
						allotGroupId: values[`assignGroupsA_${item.id}`] === 1 ? Number(values[`assignGroupA_${item.id}`]) : undefined,
						overflowFlag: values[`isSpilloverA_${item.id}`],
						queueNum: values[`queueNumA_${item.id}`],
					}
				}) : null : null, // 固定会话分配
				leaveAllotList: values.enquiryAssign ? infoData && infoData.enquiryKeys.length > 0 ? infoData.enquiryKeys.map((item, index) => {
					return {
						allotType: values[`assignGroupsB_${item.id}`],
						allotUserId: values[`assignGroupsB_${item.id}`] === 2 ? Number(values[`assignGroupB_${item.id}`]) : undefined,
						allotGroupId: values[`assignGroupsB_${item.id}`] === 1 ? Number(values[`assignGroupB_${item.id}`]) : undefined,
						// overflowFlag: values[`isSpilloverB_${item.id}`],
						// queueNum: values[`queueNumB_${item.id}`],
					}
				}) : null : null, // 固定留言分配
				consultMessage: !values.sessionAssign ? values.consultMessage : undefined,
				sessionConsultTypeList: !values.sessionAssign && infoData && infoData.sessionList.length > 0 ? infoData.sessionList.map((item, j) => {
					return { // 按客户选择的会话咨询类型分配
						name: values[`sessionNameA_${j}`],
						remark: values[`sessionRemarkA_${j}`],
						sort: 1,
						consultTypeAllotList: item.sessionKeys.map((i, index) => {
							return {
								allotType: values[`assignGroupsA_${j}&${index}`],
								allotUserId: values[`assignGroupsA_${j}&${index}`] === 2 ? Number(values[`assignGroupA_${j}&${index}`]) : undefined,
								allotGroupId: values[`assignGroupsA_${j}&${index}`] === 1 ? Number(values[`assignGroupA_${j}&${index}`]) : undefined,
								overflowFlag: values[`isSpilloverA_${j}&${index}`],
								queueNum: values[`queueNumA_${j}&${index}`],
							}
						})
					}
				}) : null,
				leaveConsultTypeList: !values.enquiryAssign && infoData && infoData.enquiryList.length > 0 ? infoData.enquiryList.map((item, j) => {
					return { // 按客户选择的留言咨询类型分配
						name: values[`enquiryNameB_${j}`],
						remark: values[`enquiryRemarkB_${j}`],
						sort: 1,
						consultTypeAllotList: item.enquiryKeys.map((i, index) => {
							return {
								allotType: values[`assignGroupsB_${j}&${index}`],
								allotUserId: values[`assignGroupsB_${j}&${index}`] === 2 ? Number(values[`assignGroupB_${j}&${index}`]) : undefined,
								allotGroupId: values[`assignGroupsB_${j}&${index}`] === 1 ? Number(values[`assignGroupB_${j}&${index}`]) : undefined,
								// overflowFlag: values[`isSpilloverB_${j}&${index}`],
								// queueNum: values[`queueNumB_${j}&${index}`],
							}
						})
					}
				}) : null,
				serviceTimeList: infoData && infoData.keys.length > 0 ? infoData.keys.map((item, index) => {
					return {
						day: values[`week_${item.id}`],
						serviceStartTime: moment(values[`time1_${item.id}`]).format('HH:mm:ss'),
						serviceEndTime: moment(values[`time2_${item.id}`]).format('HH:mm:ss'),
					};
				}) : null,
			};
			kfData.manualLabor = values.manualLabor;
			const kfRes = await postSaveChannelInfo(kfData);
			message.info(kfRes.message);
		})
	}

	render() {
		const formItemLayout = {
			labelCol: { span: 3 },
			wrapperCol: { span: 19 },
		};
		const btnLayout = {
			labelCol: { span: 3 },
			wrapperCol: { span: 19, offset: 3 },
		};
		const { getFieldDecorator, getFieldValue } = this.props.form;
		const { infoData, groupList, userList } = this.state;

		return (
			<div>
				<Form {...formItemLayout}>
					<Form.Item label="开启转人工">
						{getFieldDecorator("manualLabor", { valuePropName: 'checked' })(
							<Switch />
						)}
					</Form.Item>
					<Form.Item label={"客服工作时间"} style={{ margin: 0 }}>
						{getFieldDecorator("workTime", { initialValue: 'full' })(
							<Radio.Group onChange={(e) => this.setInfoData(e.target.value, "workTime")}>
								<Radio value='full'>全天（有人工客服在线即可转人工）</Radio>
								<Radio value='nofull'>非全天</Radio>
							</Radio.Group>
						)}
					</Form.Item>
					{infoData && infoData.workTime === "full" ? (
						<Form.Item wrapperCol={{ xs: { span: 19, offset: 3 }, sm: { span: 19, offset: 3 }}}>
							{getFieldDecorator("onlyWork", { valuePropName: "checked" })(
								<Checkbox>工作时间内仅人工客服接待</Checkbox>
							)}
						</Form.Item>
					) : (
						""
					)}
					{infoData && infoData.workTime === "nofull" ? (
						<Form.Item wrapperCol={{ xs: { span: 19, offset: 3 }, sm: { span: 19, offset: 3 }}}>
							<div style={{ padding: 20, background: "#FAFAFA", borderRadius: "4px", }}>
								{infoData && infoData.keys.length > 0 ? infoData.keys.map((item, index) => {
									return (
										<div key={index}>
											<Form.Item style={{ display: 'inline-block', width: "190px", margin: 0 }}>
												{getFieldDecorator(`week_${item.id}`, {
													initialValue: item.week,
													rules: [{ required: true, message: "请选择客服工作时间" }],
												})(
													<Select placeholder='请选择' onChange={(e) => this.getInfoData(e, "week", item.id)}>
														<Option value='1'>周一</Option>
														<Option value='2'>周二</Option>
														<Option value='3'>周三</Option>
														<Option value='4'>周四</Option>
														<Option value='5'>周五</Option>
														<Option value='6'>周六</Option>
														<Option value='7'>周日</Option>
													</Select>
												)}
											</Form.Item>
											<Form.Item style={{ display: 'inline-block', width: "190px", margin: '0 0 0 10px' }}>
												{getFieldDecorator(`time1_${item.id}`, {
													initialValue: item.time1,
													rules: [{ required: true, message: "请选择客服开始工作时间" }],
												})(
													<TimePicker
														format="HH:mm:ss"
														style={{ width: "190px" }}
														onChange={(e) => this.getInfoData(e, "time1", item.id)}
													/>
												)}
											</Form.Item>
											<Form.Item style={{ display: 'inline-block', width: "190px", margin: '0 0 0 10px' }}>
												{getFieldDecorator(`time2_${item.id}`, {
													initialValue: item.time2,
													rules: [{ required: true, message: "请选择客服结束工作时间" }],
												})(
													<TimePicker
														format="HH:mm:ss"
														style={{ width: "190px" }}
														onChange={(e) => this.getInfoData(e, "time2", item.id)}
													/>
												)}
											</Form.Item>
											{(index + 1) === infoData.keys.length ? (
												<Button type='link' onClick={this.addWorkTime}>
													<Icon
														type='plus-circle'
														theme='filled'
														style={{ fontSize: "18px", verticalAlign: "-4px", }}
													/>
													<span>添加工作时间</span>
												</Button>
											) : (
												<Button type='link' onClick={() => this.removeWorkTime(item.id)}>
													<Icon
														type='minus-circle'
														theme='filled'
														style={{
															fontSize: "18px",
															verticalAlign: "-4px",
														}}
													/>
												</Button>
											)}
										</div>
									);
								}) : null}
								<div style={{ margin: "20px 0", lineHeight: "20px" }}>
									{getFieldDecorator("onlyWork", {
										valuePropName: "checked",
										initialValue: infoData?.onlyWork,
									})(
										<Checkbox>工作时间内仅人工客服接待</Checkbox>
									)}
								</div>
								<div style={{ lineHeight: "20px" }}>
									{getFieldDecorator("unOnlyWork", {
										valuePropName: "checked",
										initialValue: infoData?.unOnlyWork,
									})(
										<Checkbox>非工作时间仅机器人接待</Checkbox>
									)}
								</div>
							</div>
						</Form.Item>
					) : null}
					<Divider style={{ marginTop: 0 }} />
					<Form.Item label='会话分配'>
						{getFieldDecorator("sessionAssign", { initialValue: true })(
							<Radio.Group onChange={(e) => this.setInfoData(e.target.value, "sessionAssign")}>
								<Radio value={true}>固定分配</Radio>
								<Radio value={false}>按客户选择的咨询类型分配</Radio>
							</Radio.Group>
						)}
						{infoData && infoData.sessionAssign ? (
							<div>
								{infoData && infoData.sessionKeys.length > 0 ? infoData.sessionKeys.map((item, index) => {
									return <>
										{getFieldDecorator(`assignGroupsA_${index}`, { initialValue: infoData && infoData[`assignGroupsA_${index}`] ? infoData[`assignGroupsA_${index}`] : 1 })(
											<Select style={{ width: "190px" }} onChange={(e) => this.setInfoData(e, `assignGroupsA_${index}`, `assignGroupA_${index}`)}>
												<Option value={1}>分配给技能组</Option>
												<Option value={2}>分配给客服</Option>
											</Select>
										)}
										{getFieldDecorator(`assignGroupA_${index}`, { initialValue: infoData[`assignGroupA_${index}`] })(
											<Select style={{ width: "190px", marginLeft: 10 }}>
												{infoData[`assignGroupsA_${index}`] === 1 ? (
													groupList.map((item, index) => {
														return <Option value={item.groupId} key={index}>{item.groupName}</Option>
													})
												) : infoData[`assignGroupsA_${index}`] === 2 ? (
													userList.map((item, index) => {
														return <Option value={item.userId} key={index}>{item.nick}</Option>
													})
												) : (
													groupList.map((item, index) => {
														return <Option value={item.groupId} key={index}>{item.groupName}</Option>
													})
												)}
											</Select>
										)}
										{getFieldDecorator(`isSpilloverA_${index}`, { initialValue: infoData && (infoData[`isSpilloverA_${index}`] || infoData[`isSpilloverA_${index}`] == 0) ? infoData[`isSpilloverA_${index}`] : 1 })(
											<Select style={{ width: "190px", marginLeft: 10 }} onChange={(e) => {
												if (e === 0) {
													this.addSessionAssign()
												} else {
													this.removeSessionAssign(item.id)
												};
												this.setInfoData(e, `isSpilloverA_${index}`);
											}}>
												<Option value={1}>不溢出</Option>
												<Option value={0}>溢出</Option>
											</Select>
										)}
										{infoData[`isSpilloverA_${index}`] === 0 ? (
											<>
												<span> 排队人数大于 </span>
												{getFieldDecorator(`queueNumA_${index}`, {
													initialValue: infoData && infoData[`queueNumA_${index}`] ? infoData[`queueNumA_${index}`] : 0
												})(<InputNumber min={0} style={{ width: '60px' }} />)}
												<span> 时</span>
											</>
										) : null}
										<br />
									</>
								}) : null}
							</div>
						) : (
							<>
								<div style={{ display: "flex" }}>
									<span style={{ marginRight: 10 }}>咨询引导语</span>
									<div style={{ width: "calc(100% - 80px)" }}>
										{getFieldDecorator("consultMessage", { initialValue: infoData?.consultMessage })(
											<Input placeholder='请输入咨询引导语' />
										)}
										<p style={{ lineHeight: "16px", color: "#13c2f3" }}>
											用户申请接入人工客服前会显示此提示
										</p>
									</div>
								</div>
								{infoData && infoData.sessionList.length > 0 ? infoData.sessionList.map((sessionItem, sessionIndex) => {
									return <>
										<div style={{ padding: 20, background: "#FAFAFA", borderRadius: "4px", }}>
											<div style={{ marginBottom: 16 }}>
												{getFieldDecorator(`sessionNameA_${sessionIndex}`, { initialValue: infoData[`sessionNameA_${sessionIndex}`] })(<Input placeholder='请输入咨询类型名称' />)}
											</div>
											<div style={{ marginBottom: 16 }}>
												{getFieldDecorator(`sessionRemarkA_${sessionIndex}`, { initialValue: infoData[`sessionRemarkA_${sessionIndex}`] })(<Input.TextArea placeholder='请输入咨询类型描述' />)}
											</div>
											{sessionItem && sessionItem.sessionKeys.length > 0
												? sessionItem.sessionKeys.map((item, index) => {
													return (
														<>
															<div style={{ display: "inline-block" }} key={index}>
																{getFieldDecorator(`assignGroupsA_${sessionIndex}&${index}`, { initialValue: infoData && infoData[`assignGroupsA_${sessionIndex}&${index}`] ? infoData[`assignGroupsA_${sessionIndex}&${index}`] : 1 })(
																	<Select style={{ width: "190px" }} onChange={(e) => this.setInfoData(e, `assignGroupsA_${sessionIndex}&${index}`, `assignGroupA_${sessionIndex}&${index}`)}>
																		<Option value={1}>分配给技能组</Option>
																		<Option value={2}>分配给客服</Option>
																	</Select>
																)}
																{getFieldDecorator(`assignGroupA_${sessionIndex}&${index}`, { initialValue: infoData[`assignGroupA_${sessionIndex}&${index}`] })(
																	<Select style={{ width: "190px", marginLeft: 10 }}>
																		{infoData[`assignGroupsA_${sessionIndex}&${index}`] === 1 ? (
																			groupList.map((item, index) => {
																				return <Option value={item.groupId} key={index}>{item.groupName}</Option>
																			})
																		) : infoData[`assignGroupsA_${sessionIndex}&${index}`] === 2 ? (
																			userList.map((item, index) => {
																				return <Option value={item.userId} key={index}>{item.nick}</Option>
																			})
																		) : (
																			groupList.map((item, index) => {
																				return <Option value={item.groupId} key={index}>{item.groupName}</Option>
																			})
																		)}
																	</Select>
																)}
																{getFieldDecorator(`isSpilloverA_${sessionIndex}&${index}`, { initialValue: infoData && (infoData[`isSpilloverA_${sessionIndex}&${index}`] || infoData[`isSpilloverA_${sessionIndex}&${index}`] == 0) ? infoData[`isSpilloverA_${sessionIndex}&${index}`] : 1 })(
																	<Select
																		style={{ width: "190px", marginLeft: 10 }}
																		onChange={(e) => {
																			if (e === 0) {
																				this.addSessionItem(sessionIndex)
																			} else {
																				this.removeSessionItem(sessionIndex, index)
																			};
																			this.setInfoData(e, `isSpilloverA_${sessionIndex}&${index}`)
																		}}
																	>
																		<Option value={1}>不溢出</Option>
																		<Option value={0}>溢出</Option>
																	</Select>
																)}
																{infoData[`isSpilloverA_${sessionIndex}&${index}`] === 0 ? (
																	<>
																		<span> 排队人数大于 </span>
																		{getFieldDecorator(`queueNumA_${sessionIndex}&${index}`, {
																			initialValue: infoData && infoData[`queueNumA_${sessionIndex}&${index}`] ? infoData[`queueNumA_${sessionIndex}&${index}`] : 0
																		})(<InputNumber min={0} style={{ width: '60px' }} />)}
																		<span> 时</span>
																	</>
																) : null}
															</div>
														</>
													);
												})
												: ""}
										</div>
										{(sessionIndex + 1) === infoData.sessionList.length ? (
											<Button type='link' onClick={this.addSession}>
												<Icon type='plus-circle' theme='filled' style={{ fontSize: "18px", verticalAlign: "-4px" }} />
											</Button>
										) : (
											<Button type='link' onClick={() => this.removeSession(sessionIndex)}>
												<Icon type='minus-circle' theme='filled' style={{ fontSize: "18px", verticalAlign: "-4px" }} />
											</Button>
										)}
										<br />
									</>
								}) : null}
							</>
						)}
					</Form.Item>
					<Divider style={{ marginTop: 0 }} />
					<Form.Item label='留言分配'>
						{getFieldDecorator("enquiryAssign", { initialValue: true })(
							<Radio.Group onChange={(e) => this.setInfoData(e.target.value, "enquiryAssign")}>
								<Radio value={true}>固定分配</Radio>
								<Radio value={false}>按客户选择的咨询类型分配</Radio>
							</Radio.Group>
						)}
						{infoData && infoData.enquiryAssign ? (
							<div>
								{infoData && infoData.enquiryKeys.length > 0 ? infoData.enquiryKeys.map((item, index) => {
									return (
										<>
											{getFieldDecorator(`assignGroupsB_${index}`, { initialValue: infoData && infoData[`assignGroupsB_${index}`] ? infoData[`assignGroupsB_${index}`] : 1 })(
												<Select style={{ width: "190px" }} onChange={(e) => this.setInfoData(e, `assignGroupsB_${index}`, `assignGroupB_${index}`)}>
													<Option value={1}>分配给技能组</Option>
													<Option value={2}>分配给客服</Option>
												</Select>
											)}
											{getFieldDecorator(`assignGroupB_${index}`, { initialValue: infoData[`assignGroupB_${index}`] })(
												<Select style={{ width: "190px", marginLeft: 10 }}>
													{infoData[`assignGroupsB_${index}`] === 1 ? (
														groupList.map((item, index) => {
															return <Option value={item.groupId} key={index}>{item.groupName}</Option>
														})
													) : infoData[`assignGroupsB_${index}`] === 2 ? (
														userList.map((item, index) => {
															return <Option value={item.userId} key={index}>{item.nick}</Option>
														})
													) : (
														groupList.map((item, index) => {
															return <Option value={item.groupId} key={index}>{item.groupName}</Option>
														})
													)}
												</Select>
											)}
											{/* {getFieldDecorator(`isSpilloverB_${index}`, { initialValue: 1 })(
												<Select
													style={{ width: "190px", marginLeft: 10 }}
													onChange={(e) => {
														if (e === 0) {
															this.addEnquiryAssign()
														} else {
															this.removeEnquiryAssign(item.id)
														};
														this.setInfoData(e, `isSpilloverB_${index}`);
													}}
												>
													<Option value={1}>不溢出</Option>
													<Option value={0}>溢出</Option>
												</Select>
											)} */}
											{/* {infoData[`isSpilloverB_${index}`] === 0 ? (
												<>
													<span> 排队人数大于 </span>
													{getFieldDecorator(`queueNumB_${index}`, {
														initialValue: 0
													})(<InputNumber min={0} style={{ width: '60px' }} />)}
													<span> 时</span>
												</>
											) : null} */}
											<br />
										</>
									)
								}) : null}
							</div>
						) : (
							<>
								{infoData && infoData.enquiryList.length > 0 ? infoData.enquiryList.map((enquiryItem, j) => {
									return <>
										<div style={{ padding: 20, background: "#FAFAFA", borderRadius: "4px", }}>
											{/* <div style={{ display: "flex" }}>
												<span style={{ marginRight: 10 }}>咨询引导语</span>
												<div style={{ width: "calc(100% - 80px)" }}>
													<Input placeholder='请输入咨询引导语' />
													<p style={{ lineHeight: "16px", color: "#13c2f3" }}>用户申请接入人工客服前会显示此提示</p>
												</div>
											</div> */}
											<div style={{ marginBottom: 16 }}>
												{getFieldDecorator(`enquiryNameB_${j}`, { initialValue: infoData[`enquiryNameB_${j}`] })(<Input placeholder='请输入咨询类型名称' />)}
											</div>
											<div style={{ marginBottom: 16 }}>
												{getFieldDecorator(`enquiryRemarkB_${j}`, { initialValue: infoData[`enquiryRemarkB_${j}`] })(<Input.TextArea placeholder='请输入咨询类型描述' />)}
											</div>
											{enquiryItem && enquiryItem.enquiryKeys.length > 0 ? enquiryItem.enquiryKeys.map((item, index) => {
												return (
													<>
														<div style={{ display: "inline-block" }} key={index}>
															{getFieldDecorator(`assignGroupsB_${j}&${index}`, { initialValue: infoData && infoData[`assignGroupsB_${j}&${index}`] ? infoData[`assignGroupsB_${j}&${index}`] : 1 })(
																<Select style={{ width: "190px" }} onChange={(e) => this.setInfoData(e, `assignGroupsB_${j}&${index}`, `assignGroupB_${j}&${index}`)}>
																	<Option value={1}>分配给技能组</Option>
																	<Option value={2}>分配给客服</Option>
																</Select>
															)}
															{getFieldDecorator(`assignGroupB_${j}&${index}`, { initialValue: infoData[`assignGroupB_${j}&${index}`] })(
																<Select style={{ width: "190px", marginLeft: 10 }}>
																	{infoData[`assignGroupsB_${j}&${index}`] == 1 ? (
																		groupList.map((item, index) => {
																			return <Option value={item.groupId} key={index}>{item.groupName}</Option>
																		})
																	) : infoData[`assignGroupsB_${j}&${index}`] == 2 ? (
																		userList.map((item, index) => {
																			return <Option value={item.userId} key={index}>{item.nick}</Option>
																		})
																	) : (
																		groupList.map((item, index) => {
																			return <Option value={item.groupId} key={index}>{item.groupName}</Option>
																		})
																	)}
																</Select>
															)}
															{/* {getFieldDecorator(`isSpilloverB_${j}&${index}`, { initialValue: 1 })(
																	<Select
																		style={{ width: "190px", marginLeft: 10 }}
																		onChange={(e) => {
																			if (e === 0) {
																				this.addEnquiryItem(j)
																			} else {
																				this.removeEnquiryItem(j, index)
																			};
																			this.setInfoData(e, `isSpilloverB_${j}&${index}`);
																		}}
																	>
																		<Option value={1}>不溢出</Option>
																		<Option value={0}>溢出</Option>
																	</Select>
																)} */}
															{/* {infoData[`isSpilloverB_${j}&${index}`] === 0 ? (
																	<>
																		<span> 排队人数大于 </span>
																		{getFieldDecorator(`queueNumB_${j}&${index}`, {
																			initialValue: 0
																		})(<InputNumber min={0} style={{ width: '60px' }} />)}
																		<span> 时</span>
																	</>
																) : null} */}
														</div>
													</>
												);
											}) : ""}
										</div>
										{(j + 1) === infoData.enquiryList.length ? (
											<Button type='link' onClick={this.addEnquiry}>
												<Icon type='plus-circle' theme='filled' style={{ fontSize: "18px", verticalAlign: "-4px" }} />
											</Button>
										) : (
											<Button type='link' onClick={() => this.removeEnquiry(j)}>
												<Icon type='minus-circle' theme='filled' style={{ fontSize: "18px", verticalAlign: "-4px" }} />
											</Button>
										)}
										<br />
									</>
								}) : null}
							</>
						)}
					</Form.Item>
					<Form.Item {...btnLayout}>
						<Button type="primary" onClick={this.doSaveTransfer}>保存</Button>
					</Form.Item>
				</Form>
			</div>
		)
	}
}

export default Form.create()(Transfer)